<template>
	<view class="sxran-im-im-chat">
		<view class="sxran-im-im-chat-body" v-if="conversationId">
			<view class="sxran-im-im-chat-heard">
				<sxran-im-text :text='conversation.title' size='16'></sxran-im-text>
			</view>
			<view class="sxran-im-im-chat-content">
				<!-- <sxran-im-list @scrolltoupper='scrolltoupper'
					:show-scrollbar='showScrollbar' style="height: 100%;" :upperThreshold='50' class="sxran-im-chat-list"
					:scroll-y='true' :scrollTop='scrollTop' :scrollIntoView="scrollIntoView"
					:scrollWithAnimation='true'>
					<view>
						<uni-load-more v-show='isNoMore || messageList.length == 0' :status="'noMore'" />
						<template v-for="(item, index) in messageList" :key="'talk-'+ index">
							<sxran-im-text v-if="index % 15 == 0" size="12" :text="toFriendlyTime(item.create_time)"
								align="center" color='var(--uni-text-color-grey)'></sxran-im-text>
							<sxran-im-talk :id="'talk-'+ index" :msg="item"></sxran-im-talk>
						</template>
					</view>
				</sxran-im-list> -->
				<!--小程序环境 sxran-im-list scrollTop滚动到底部无效 -->
				<scroll-view @scrolltoupper='scrolltoupper' :show-scrollbar='true' style="height: 100%;"
					class="sxran-im-list" scroll-y :scrollTop='scrollTop' :scrollIntoView="scrollIntoView"
					:scrollWithAnimation='true'>
					<view>
						<template v-for="(item, index) in messageList" :key="'talk-'+ index">
							<sxran-im-talk :id="'talk-'+ index" :msg="item"></sxran-im-talk>
						</template>
					</view>
				</scroll-view>

			</view>
			<view class="sxran-im-im-chat-foot" v-if="showChatInput">
				<sxran-im-chat-input @confirm='sendChange'></sxran-im-chat-input>
			</view>
		</view>
		<view class="sxran-im-im-chat-body" v-else>
			<sxran-im-text text='sxran' size="40" bold align='center' style='text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);'></sxran-im-text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'sxran-im-im-chat',
		props: {
			showChatInput: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isNoMore: false,
				showScrollbar: true,
				isUpdateScrollTop: true,
				scrollIntoView: null,
				oldScrollTop: 0,
				scrollTop: 0,
				height: 0,
				contentText: '',
				chatHistory: [{
						"body": "区实律较采一计二实值号学老且部。blob:https://www.baidu.net/37cfbbb1-d5a2-43da-bb49-293bc029ab70,青说布例百存度么包入种区应深。须向却资圆约最矿采正眼响导着。包任很形石结需严气毛道线海权小代理计。出越前联没与能众体住往市什交史维。除间整等支做识声义那由较物断王红节。",
						"type": "text",
						"from_uid": "676b84add3d3a985127e5220",
						"nickname": "admin3",
						"to_uid": "676b81c9bb861798f102cf82",
						"is_read": false,
						"create_time": 1735403614520,
						"update_time": 1735403614520,
						"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
						"appid": "__UNI__8C91A2D",
						"call_uid": [],
						"reader_list": [{
							"user_id": "676b81c9bb861798f102cf82",
							"create_time": 1735403620423
						}],
						"_id": "6770285eeeb62310ae2bb05f",
						"unique_id": "um58ei6uw5d2c0251ae6f847346681b86054e38f2"
					},
					{
						"body": "区实律较采一计二实值号学老且部。blob:https://www.baidu.net/37cfbbb1-d5a2-43da-bb49-293bc029ab70,青说布例百存度么包入种区应深。须向却资圆约最矿采正眼响导着。包任很形石结需严气毛道线海权小代理计。出越前联没与能众体住往市什交史维。除间整等支做识声义那由较物断王红节。",
						"type": "text",
						"from_uid": "676b84add3d3a985127e5220",
						"nickname": "admin3",
						"to_uid": "676b81c9bb861798f102cf82",
						"is_read": false,
						"create_time": 1735403614520,
						"update_time": 1735403614520,
						"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
						"appid": "__UNI__8C91A2D",
						"call_uid": [],
						"reader_list": [{
							"user_id": "676b81c9bb861798f102cf82",
							"create_time": 1735403620423
						}],
						"_id": "6770285eeeb62310ae2bb05f",
						"unique_id": "um58ei6uw5d2c0251ae6f847346681b86054e38f2"
					},
					{
						"body": "区实律较采一计二实值号学老且部。blob:https://www.baidu.net/37cfbbb1-d5a2-43da-bb49-293bc029ab70,青说布例百存度么包入种区应深。须向却资圆约最矿采正眼响导着。包任很形石结需严气毛道线海权小代理计。出越前联没与能众体住往市什交史维。除间整等支做识声义那由较物断王红节。",
						"type": "text",
						"from_uid": "676b84add3d3a985127e5220",
						"nickname": "admin3",
						"to_uid": "676b81c9bb861798f102cf82",
						"is_read": false,
						"create_time": 1735403614520,
						"update_time": 1735403614520,
						"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
						"appid": "__UNI__8C91A2D",
						"call_uid": [],
						"reader_list": [{
							"user_id": "676b81c9bb861798f102cf82",
							"create_time": 1735403620423
						}],
						"_id": "6770285eeeb62310ae2bb05f",
						"unique_id": "um58ei6uw5d2c0251ae6f847346681b86054e38f2"
					},
					// {
					// 	"type": "rich-text",
					// 	"to_uid": "676b84add3d3a985127e5220",
					// 	"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
					// 	"client_create_time": 1735403397903,
					// 	"from_uid": "676b81c9bb861798f102cf82",
					// 	"state": -200,
					// 	"body": [{
					// 		"name": "img",
					// 		"attrs": {
					// 			"src": "blob:http://localhost:8080/37cfbbb1-d5a2-43da-bb49-293bc029ab70",
					// 			"width": 231,
					// 			"height": 82
					// 		}
					// 	}],
					// 	"appId": "__UNI__8C91A2D",
					// 	"unique_id": "um58edjprc694d65186dd87ab895de37660c6537e"
					// }, 
					{
						"type": "image",
						"to_uid": "676b84add3d3a985127e5220",
						"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
						"client_create_time": 1735403411118,
						"from_uid": "676b81c9bb861798f102cf82",
						"nickname": "admin3",
						"state": -200,
						"body": {
							"url": "https://cdn.apifox.com/www/assets/image/index/main-interface.webp",
							"size": 44564,
							"name": "arsoofve.png",
							"width": 100,
							"height": 100
						},
						"appId": "__UNI__8C91A2D",
						"unique_id": "um58edtwu4ec61bde85b5842ab9dcd30f3f74e4e6"
					},
					//{
					// 	"type": "rich-text",
					// 	"to_uid": "676b84add3d3a985127e5220",
					// 	"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
					// 	"client_create_time": 1735406492074,
					// 	"from_uid": "676b81c9bb861798f102cf82",
					// 	"state": -200,
					// 	"body": [{
					// 			"name": "img",
					// 			"attrs": {
					// 				"src": "blob:http://localhost:8080/78336fa9-ce8d-4bb1-a466-f5ee94ca2266",
					// 				"width": 780,
					// 				"height": 159
					// 			}
					// 		},
					// 		{
					// 			"type": "text",
					// 			"text": "??  哈哈  "
					// 		},
					// 		{
					// 			"name": "a",
					// 			"attrs": {
					// 				"class": "link",
					// 				"target": "_blank",
					// 				"href": "http://localhost:8080/49a393d1-205a-4be2-b5bc-96722697f01d"
					// 			},
					// 			"children": [{
					// 				"type": "text",
					// 				"text": "http://localhost:8080/49a393d1-205a-4be2-b5bc-96722697f01d"
					// 			}]
					// 		}
					// 	],
					// 	"appId": "__UNI__8C91A2D",
					// 	"unique_id": "um58g7v6ye08d4e23a907f8a81a224dda9a968d36"
					// }, {
					// 	"type": "text",
					// 	"to_uid": "676b81c9bb861798f102cf82",
					// 	"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
					// 	"client_create_time": 1735404110655,
					// 	"from_uid": "676b84add3d3a985127e5220",
					// 	"state": 100,
					// 	"body": "http://localhost:8080/37cfbbb1-d5a2-43da-bb49-293bc029ab70",
					// 	"appId": "__UNI__8C91A2D",
					// 	"unique_id": "um58estoffa6fb7207d5bfd9ce193ec7345133cc4",
					// 	"create_time": 1735404110878,
					// 	"_id": "67702a4faef0fe869e41ead7"
					// },
					{
						"type": "file",
						"to_uid": "676b81c9bb861798f102cf82",
						"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
						"nickname": "admin3",
						"client_create_time": 1735406404910,
						"from_uid": "676b84add3d3a985127e5220",
						"state": -200,
						"body": {
							"url": "blob:http://localhost:8080/30847405-1118-496f-a44b-3294d7fbbc34",
							"size": 27061416,
							"name": "74E888piC8r7.mp4"
						},
						"appId": "__UNI__8C91A2D",
						"unique_id": "um58g5zxq17709f70ef38917aa5508f2206617e01"
					},
					{
						"type": "video",
						"to_uid": "676b84add3d3a985127e5220",
						"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
						"client_create_time": 1735543428969,
						"from_uid": "676b84add3d3a985127e5220",
						"nickname": "admin3",
						"state": -200,
						"body": {
							"url": "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
							"size": 27061416,
							"name": "55u888piC3Wn.mp4"
						},
						"appId": "__UNI__8C91A2D",
						"unique_id": "um5apqwdl4fd93ad416b6283c41e77fb72b027695"
					}
					// {
					// 	"type": "text",
					// 	"to_uid": "676b84add3d3a985127e5220",
					// 	"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
					// 	"client_create_time": 1735406623084,
					// 	"from_uid": "676b81c9bb861798f102cf82",
					// 	"state": 100,
					// 	"body": "??",
					// 	"appId": "__UNI__8C91A2D",
					// 	"unique_id": "um58gaoa403eaae8e37bea2ee42186f3649a53204",
					// 	"create_time": 1735406623279,
					// 	"_id": "6770341ff9b1f94a7d268735"
					// }
				]
			}
		},
		computed: {
			last: function() {
				return this.chatHistory.length - 1;
			},
			conversationId: function() {
				return uni.$Im.getCurrentConversationId();
			},
			messageList: function() {
				return uni.$Im.getConversationMessageList(this.conversationId);
			},
			currentUserId: function() {
				return uni.$Im.getCurrentUserId();
			},
			conversation() {
				return uni.$Im.getConversationById(this.conversationId);
			},
			toFriendlyTime() {
				return function(time) {
					let timestamp = time + uni.$Im.getHeartbeat() * 0;
					return uni.$u.toFriendlyTime(timestamp)
				}
			},
			// nickName(){
			// 	return  uni.$Im.getCurrentUserNickName();
			// }

		},
		mounted() {

		},
		methods: {

			async sendChange(text) {
				// const contenteditableHTMl = this.$refs.contenteditable.innerHTML;
				// 获取innerhTML 内容生成DOM Vnode虚拟对象  text | 文本， a | 链接 ， img | 图片, 邮箱，手机号，银行卡号等 添加标签配置信息
				// {
				// 	name 标签名,
				//  attr  标签属性
				// }

				//组装发送信息  内容，对象id, 自己id,等关键信息
				//send 发送消息
				console.log(this.conversation)
				const params = {
					"msgType": "0",
					"to": this.conversation.friendUid,
					"conversation": this.conversationId,
					"createTime": Date.now(),
					"serviceCreateTime": Date.now(),
					"from": this.currentUserId,
					"content": text,
					"msgState": 0,
					"extras": {},
					"chatType": 2,
					"cmd": 11
				}

				const body = await uni.$Im.executeCmdMethods(11, params);
				// this.updateScrollTop();
				//区分普通消息，图片 文件 视频等信息重新组装params 在选择确定时无需走发送


				// this.chatHistory.push({
				// 	"type": "text",
				// 	"to_uid": "676b84add3d3a985127e5220",
				// 	"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
				// 	"client_create_time": 1735407432896,
				// 	"from_uid": "676b84add3d3a985127e5220",
				// 	"state": 0,
				// 	"body": text,
				// 	"appId": "__UNI__8C91A2D",
				// 	"unique_id": "um58gs14wa6d46c00f770833d11c999b0455a8989"
				// })


				// setTimeout(() => {
				// 	//模拟自动回复
				// 	this.chatHistory.push({
				// 		"type": "text",
				// 		"to_uid": "676b81c9bb861798f102cf82",
				// 		"conversation_id": "single_7b5becaa3c1ece283bcea8b112bfbb9a",
				// 		"client_create_time": 1735407432896,
				// 		"from_uid": "676b84add3d3a985127e5220",
				// 		"state": 0,
				// 		"body": '收到你的回复',
				// 		"appId": "__UNI__8C91A2D",
				// 		"unique_id": "um58gs14wa6d46c00f770833d11c999b0455a8989"
				// 	})

				// }, 2000)
				

			},
			updateScrollTop() {
				//发送消息自动滚到到底部
				setTimeout(() => {
					this.$nextTick(() => {
						this.scrollIntoView = 'talk-' + (this.messageList.length - 1);
						// this.scrollTop += 300;
					})
				}, 0)

			},

			//触顶
			scrolltoupper() {
				uni.$Im.getConversationByIdMessageList({
					"conversation": this.conversationId,
					"maxTime": this.messageList[0].create_time,
					"offset": 1,
					"count": 20,
				}, res => {
					if (res.length == 0) {
						this.isNoMore = true;
						this.scrollTop = 0;
					}
					this.scrollTop = 110;
				})
			}
		},
		watch: {
			messageList: {
				handler(val) {
					this.updateScrollTop();
				},
				deep: true,
			},
			conversationId() {
				this.isNoMore = false;
			}
		},
		beforeUnmount() {
			// #ifdef H5
			// uni.$off('conversationChange', this.conversationChange);
			// #endif
		}
	}
</script>
<style scoped lang="scss">
	.sxran-im-im-chat {
		width: 100%;
		height: 100%;
		background: linear-gradient(to right bottom, var(--uni-bg-color-assist), var(--uni-bg-color-envoy));

		&-body {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			// align-items: center;
			// justify-content: center;
			.sxran-im-im-chat-heard {
				position: relative;
				padding: $uni-spacing-row-lg;
				&::before {
					position: absolute;
					content: '';
					height: 1px;
					width: 200%;
					bottom: 0;
					background-color: var(--uni-border-color);
					transform: scale(0.5);
					transform-origin: left;
					left: 0;
				}
			}

			.sxran-im-im-chat-content {
				flex-grow: 1;
				flex-shrink: 1;
				overflow: hidden;
				
				.sxran-im-list {
					:deep(.uni-scroll-view){
						overflow: hidden auto !important;
						overflow-anchor: auto !important;
						-websxran-im-overflow-scrolling: touch;
						overflow: hidden auto !important;
					}
					.sxran-im-list-body {
						height: 100%;
					}
				}
			}

			.sxran-im-im-chat-foot {
				position: relative;
				display: flex;
				flex-direction: column;
				margin-bottom: 20px;
				&::after {
					position: absolute;
					content: '';
					height: 1px;
					width: 200%;
					top: 0;
					background-color: var(--uni-border-color);
					transform: scale(0.5);
					transform-origin: left;
					left: 0;
				}






			}
		}
	}
</style>